<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
  <style>
    li {
      list-style: none;
    }

    a {
      text-decoration: none;
    }
    header a{
      text-decoration: none;
      color: #6c6c6c;
    }
    .el-table .el-table__cell{
      padding: 0;
    }
    .el-table .cell{
      white-space: nowrap;/*设置内容不换行*/
      text-overflow: ellipsis;/*有超出显示范围的文本时显示...*/
    }
    .p_img:hover{
      position: relative;
      top: 5px;
      /*设置元素阴影:x偏移值 y偏移值 浓度(值越大越模糊) 范围 颜色*/
      box-shadow: 0 0 10px 5px #333;
    }
    .use{
      padding: 15px 5px 0 5px;
      margin: 0 auto;
      display: inline-block;
      text-align: center;
    }
    .userinfo{
      color: #39bf3e;
      font-size: 12px;
      display: block;
      text-align: center;
      margin: 0 auto;
      margin-bottom: 55px;
    }


  </style>
</head>
<body>
<div id="app">
  <el-container>
    <el-header height="150px">
      <div style="width: 1300px;margin: 0 auto">
        <img src="imgs/logo.png" style="width: 300px;vertical-align: middle;" alt="">
        <div style="width:500px;position: relative;top: 10px;display: inline-block;margin: 0 120px">
          <el-input style="border: #39bf3e 1px solid" placeholder="请输入搜索内容" v-model="wd">
            <el-button style="border-left:none;background-color: #39bf3e;color: #fff;" slot="append" icon="el-icon-search" @click="search()">搜索</el-button>
          </el-input>
        </div>
        <div style="display: inline-block;position: relative;left: 100px">
          <div class="use">
            <el-button  icon="el-icon-user-solid"></el-button>
          </div>
          <h5 style="display: inline-block">欢迎{{uname}}回来</h5>
        </div>
      </div>
      <!--导航菜单开始-->
      <div>
        <el-menu style="width: 1300px;margin: 0 auto;"
                 :default-active="activeIndex"
                 class="el-menu-demo"
                 mode="horizontal"
                 @select="handleSelect"
                 background-color="#39bf3e"
                 text-color="#fff"
                 active-text-color="#fff">
          <el-menu-item style="font-size: 16px;padding:0 25px" :index="0">首页</el-menu-item>
          <el-menu-item style="font-size: 16px;" v-for="c in categoryArr"  :index="c.id">{{c.name}}</el-menu-item>
          <el-menu-item style="font-size: 16px;padding:0 25px" :index="0">供应大厅</el-menu-item>
          <el-menu-item style="font-size: 16px;" v-for="c in categoryArr"  :index="c.id">{{c.name}}</el-menu-item>
          <el-menu-item style="font-size: 16px;padding:0 25px" :index="0">采购大厅</el-menu-item>
          <el-menu-item style="font-size: 16px;" v-for="c in categoryArr"  :index="c.id">{{c.name}}</el-menu-item>
        </el-menu>
      </div>
      <!--导航菜单结束-->
      <!--分类-->
      <!DOCTYPE html>
      <html lang="en">
      <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>购物车——PC端</title>
        <link rel="stylesheet" href="css/main.css">
      </head>

      <body>
      <div class="wrap clearfix">
        <div class="location">当前位置：首页<span>&gt;</span><b class="red">购物车</b></div>
        <table width="100%" class="cartTable" cellspacing="0" cellpadding="10px">
          <!-- 首行 -->
          <tr class="title">
            <td width="50"><input type="checkbox" name="" class="choose_all"></td>
            <td width="100" class=""><span style="margin-left: -10px;">全选</span></td>
            <td width="400">商品信息</td>
            <td width="150">单价（元）</td>
            <td width="150">数量</td>
            <td width="150">金额（元）</td>
            <td width="80">操作</td>
          </tr>

          <!-- 商品具体信息 -->
          <tr class="row">
            <td><input type="checkbox" name="" class="choose"></td>
            <td class="tal"><a href="#" class="pic"><img src="images/pic01.jpg" alt=""></a></td>
            <td class="tal"><a href="#">西瓜</a></td>
            <td>
              <span class="tdl">158.00</span>
              <br>
              <b class="unit">129.00</b>
            </td>
            <td>
              <div class="amount">
                <a href="#" class="Increase">+</a>
                <input type="text" value="1" class="unum">
                <a href="#" class="Reduce">-</a>
              </div>
            </td>
            <td><b class="u-price">129.00</b></td>
            <td><a href="#" class="btn-del">删除</a></td>
          </tr>

          <tr class="row">
            <td><input type="checkbox" name="" checked="checked" class="choose"></td>
            <td class="tal"><a href="#" class="pic"><img src="images/pic02.jpg" alt=""></a></td>
            <td class="tal"><a href="#">重庆西瓜/大西瓜</a></td>
            <td>
              <span class="tdl">358.00</span>
              <br>
              <b class="unit">299.00</b>
            </td>
            <td>
              <div class="amount">
                <a href="#" class="Increase">+</a>
                <input type="text" value="1" class="unum">
                <a href="#" class="Reduce">-</a>
              </div>
            </td>
            <td><b class="u-price">299.00</b></td>
            <td><a href="#" class="btn-del">删除</a></td>
          </tr>

          <tr class="row">
            <td><input type="checkbox" name="" checked="checked" class="choose"></td>
            <td class="tal"><a href="#" class="pic"><img src="images/pic03.jpg" alt=""></a></td>
            <td class="tal"><a href="#">德国进口 重庆西瓜</a></td>
            <td>
              <span class="tdl">54.00</span>
              <br>
              <b class="unit">37.00</b>
            </td>
            <td>
              <div class="amount">
                <a href="#" class="Increase">+</a>
                <input type="text" value="1" class="unum">
                <a href="#" class="Reduce">-</a>
              </div>
            </td>
            <td><b class="u-price">37.00</b></td>
            <td><a href="#" class="btn-del">删除</a></td>
          </tr>

          <tr class="count">
            <td colspan="7">
              <div class="jiesuan clearfix">
                <div class="left fl">
                  <p><input type="checkbox" name="" class="choose_all"> 全选&nbsp;&nbsp;&nbsp;<a href="#" class="del_check">删除选中商品</a></p>
                </div>
                <div class="right fr clearfix">
                  <p>商品总计：￥465.00</p>
                  <p>活动优惠：-￥0.00</p>
                  <p>已选商品<span class="red t-number"> 0 </span>件 总价(不含运费、税费)：<span class="red t-price">￥0.00</span></p>
                  <!-- <div><a href="#" class="btn pay">结算</a></div> -->
                  <a href="#" class="btn pay fr">结算</a>
                </div>
              </div>
            </td>
          </tr>
        </table>
      </div>

      <!-- 引入JS文件 -->
      <script src="js/main.js"></script>
      </body>

      </html>
      ————————————————

    <el-footer>
      <div style="height: 95px;">
      </div>
      <div style="background-color: #3f3f3f;padding:30px 0;text-align: center;color: #b1b1b1">
        <p>Copyright © 北京达内金桥科技有限公司版权所有 京ICP备12003709号-3 京公网安备 11010802029572号
        </p>
        <p>达内在线WWW.TMOOC.CN 专注于IT职业技能培训</p>
        <p>涵盖20余门课程体系，致力于打造权威的IT职业教育学习平台</p>
      </div>
    </el-footer>
</el-table>
    </el-header>
  </el-container>
</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>

<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
  let v = new Vue({
    el: '#app',
    data: function() {
      return {
        bannerArr: [],
        categoryArr: [],
        activeIndex:"0",
        wd:"",
        topArr:[],
        productArr:[],
        uname:"",
        visible:true,
        Index:"1"
      }
    },
    methods: {
      handle(key,keyPath){

      },
      handleSelect(key,keyPath){
        console.log(key,keyPath);
        location.href="/result.html?id="+key;
      },
      search(){
        location.href="/result.html?wd="+v.wd;
      }
    },
    created:function () {
      axios.get("/category/select").then(function (response) {
        v.categoryArr = response.data;
      })
      axios.get("/banner/select").then(function (response) {
        v.bannerArr = response.data;
      })
      axios.get("/product/select").then(function (response) {
        v.productArr = response.data;
      })
    }
  })
</script>
</html>
